<template>

  <h2>
    <span><strong>RubyConf</strong></span> is the world’s largest and
    longest-running gathering of Ruby enthusiasts, practitioners, and
    companies.
  </h2>

  <register-window />

  <div class="two-col-grid">
    <div class="join padding-25-50">
      <h3>Join in person or virtually</h3>
      <p>
        RubyConf 2021 will be a hybrid conference, combining
        <strong>in-person</strong> and <strong>virtual components</strong>.
        Join in whichever format you prefer!
      </p>
      <ul>
        <li>
          Take part in a safe and socially distanced conference at the Denver
          Convention Center.
        </li>
        <li>Join us virtually by engaging with our content online.</li>
      </ul>
    </div>
    <div>
      <div class="safety padding-25-50">
        <h3>Your safety is our top priority</h3>
        <p>
          We follow
          <a
            href="https://www.cdc.gov/coronavirus/2019-ncov/your-health/large-gatherings.html"
            target="_blank"
            >CDC safety guidelines</a
          >
          and require all attendees to as well. Your help ensures a safe,
          secure, and enjoyable RubyConf for all.
        </p>
      </div>
      <div class="international padding-25-50">
        <h3>International attendees</h3>
        <p>
          The U.S. border is closed to most outside travelers. We’ll stay up
          to date on the entry status and advise non-US attendees as the
          situation develops.
        </p>
      </div>
    </div>
  </div>
  <div class="guidelines padding-25-50">
    While safety guidelines are subject to change based on regulations at the
    local, state, and federal levels, we still ask that in-person attendees
    exercise caution and follow public health best practices that will ensure
    the safety of our Ruby community. As the conference date approaches, we
    will post a more detailed COVID-19 Safety Guidelines here.
  </div>

  <div class="two-col-grid">
    <div class="why padding-25-50 font-inconsolata">
      <h3 class="font-inconsolata">
        Why RubyConf?
        <div class="cursor-buddy"></div>
      </h3>
      <div class="quote">
        <p>
          <strong>Matz</strong>
          The oldest and most authentic Ruby conference in the world… I love
          the community; I’m proud of being part of it.
        </p>
      </div>
      <div class="quote">
        <p>
          <strong>Nadia Odunayo</strong>
          A lot of these people, you’ve been reading their blog posts over the
          years or watching their talks and now you get to meet them!
        </p>
      </div>
      <div class="quote">
        <p>
          <strong>Dana Weiss</strong>
          The Ruby community is one big beating heart and I’m excited to be a
          part of it!
        </p>
      </div>
      <div class="quote">
        <p>
          <strong>Justin Searls</strong>
          We have a common set of values, a common set of interests, and just
          a curiosity and a playfulness that you don’t see in other language
          ecosystems.
        </p>
      </div>
      <div class="quote">
        <p>
          <strong>Chrissy Hunt</strong>
          Amazing first day at RubyConf! I thought I was here to learn about
          code, but this whole day has been a lesson in the power of community
          and coordinated action to create change in/with tech.
        </p>
      </div>
      <div class="quote">
        <p>
          <strong>Nina Kaufman</strong>
          I feel like being able to meet and learn from folks in the Ruby
          community is essential to what makes RubyConf so great.
        </p>
      </div>
    </div>

    <div class="updates padding-25-50">
      <div class="updates-window">
        <h3><span class="faux-btn"></span>Updates</h3>
        <ul>
          <li class="">
            <div class="news-image"></div>
            <small class="font-inconsolata">April 15</small>
            <strong>RubyConf.org is live!</strong>
            <p>
              Welcome to the new RubyConf site. We launched a little earlier
              than usual this year and can't wait to see you in Denver or
              online in November. Registration will be open soon.
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="sponsors-footer padding-25-50">
    <h3>Interested in sponsoring RubyConf?</h3>
    <span
      >✉️<a href="mailto:sponsors@rubycentral.org">Get in touch</a> to learn
      more.</span
    >
  </div>

<!-- test banner ads
<div id="banger-ads">
  <a href="#" class="banger-ads-item active"><img src="../img/banner1.png"></a>
  <a href="#" class="banger-ads-item"><img src="../img/banner2.gif"></a>
</div>-->
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { RegisterWindow } from '@/components';

export default defineComponent({
  name: 'Home',
  components: {
    [RegisterWindow.name]: RegisterWindow,
  },
});
</script>

<style lang="less">
@import '~@/assets/css/variables.less';

.two-col-grid {
  .join {
    background: #ea652c;
    color: #171714;
    h3 {
      padding-top: 80px;
      background: url(/img/join-icon.svg) 0 0 no-repeat;
      color: #fffbec;
    }
    ul li {
      padding: 0 0 0 40px;
      &:first-child {
        margin: 0 0 15px;
        background: url(/img/flag-icon.svg) 0 0 no-repeat;
      }
      &:last-child {
        background: url(/img/couch-icon.svg) 0 0 no-repeat;
      }
    }
  }
  .safety {
    background: #171714;
    &,
    & a {
      color: #fffbec;
    }
    h3 {
      padding-top: 80px;
      background: url(/img/safety-icon.svg) 0 0 no-repeat;
      color: #ffd801;
    }
  }
  .international h3 {
    padding-top: 80px;
    background: url(~@/assets/images/international-icon.svg) 0 0 no-repeat;
    color: #ea652c;
  }
  //
  .why {
    background: #171714;
    box-shadow: inset 0 0 0 8px hsla(0, 0%, 100%, 0.1);
    color: #fffbec;
    .cursor-buddy {
      width: 8px;
      height: 16px;
      background: rgba(255, 251, 236, 0.25);
      position: absolute;
      bottom: 3px;
      right: -8px;
      -webkit-animation-name: cursor-buddy;
      animation-name: cursor-buddy;
      -webkit-animation-duration: 1.65s;
      animation-duration: 1.65s;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
    }
    h3 {
      color: #ffd801;
      padding-top: 50px;
      background: url(~@/assets/images/why-icon.svg) 0 0 no-repeat;
      position: relative;
      display: inline-block;
      text-transform: none;
      font-size: @text14;
    }
    strong {
      color: #ea652c;
    }
    .quote {
      margin: 0 0 15px;
      &:last-child {
        margin: 0;
      }
      p {
        line-height: 120%;
      }
    }
  }
  .updates {
    h3 {
      color: #ea652c;
      padding-top: 80px;
      background: url(~@/assets/images/updates-icon.svg) 0 0 no-repeat;
    }
    ul {
      font-size: @text14;
      li {
        margin: 0 0 15px;
        &:last-child {
          margin: 0;
        }
      }
      small {
        margin: 0 0 -2px;
        display: block;
      }
      strong {
        font-weight: @fw7;
        color: #ea652c;
      }
      p {
        line-height: 140%;
      }
    }
  }
}
.guidelines {
  background: #ffd801;
  font-size: @text12;
  line-height: 150%;
  text-align: center;
  color: #171714;
}
.sponsors-footer {
  background: #ffd801;
  text-align: center;
  color: #171714;
  border-radius: 0 0 12px 12px;
  a {
    color: #171714;
  }
}
@media (max-width: 823px) and (orientation: landscape),
  screen and (max-width: 900px) and (orientation: portrait) {
  .guidelines {
    text-align: left;
  }
  .sponsors-footer {
    border-radius: 0 0 6px 6px;
  }
}
</style>
